<template>
  <div style="height:100%">
    <div style="height:100px;">
      <p>地图demo</p>
    </div>
    <div style="height:calc(100% - 100px);">
      <div id="container"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import G6 from '@antv/g6'
import { usePathNodeUpgrade, useCustomAGVCar } from '../registerNode'
import { useCustomizeLayout, useStaticUpgradeEdge } from '../registerLayout'
const nodes = ref([])
nodes.value = []
const edges = ref([])
// useCustomizeLayout()
useCustomAGVCar()
useStaticUpgradeEdge()
usePathNodeUpgrade()
const toolbar = new G6.ToolBar();
const tooltip = new G6.Tooltip({
  offsetX: 10,
  offsetY: 20,
  getContent(e) {
    const outDiv = document.createElement('div');
   
    return outDiv;
  },
  itemTypes: ['node'],
});
onMounted(() => {
  // 如果以下面的布局来看，grid布局是完全不看坐标节点的；
  nodes.value=[{id:'node1',label:'node1',x:100,y:100,nodeType:1,nodeAttrs:[1,2]},
  {id:'node2',label:'node2',x:200,y:200,nodeType:1,nodeAttrs:[1,2]}]
  edges.value=[{source:'node1',target:'node2',label:'edge1'}]
  let width = document.getElementById('container').scrollWidth;
  let height = document.getElementById('container').scrollHeight;
  let graph = new G6.Graph({
    container: 'container',
    width: width,
    height: height,
    enabledStack: true,
    fitView: true,
    preventOverlap: true,
    fitCenter: true,
    fitViewPadding: 10,
    animate: true,
  })
  graph.data({
    nodes: nodes.value,
    edges: edges.value
  })
  graph.render()
  setTimeout(() => {
    console.log(graph.save())
  }, 1000)
})
</script>

<style>
/* 样式可以写在这里 */
#container {
  width: 100%;
  height: 100%;
}

/* .g6-toolbar-ul {
  position: absolute;
  top: 0px;
  left: 0px;
  visibility: hidden;
} */
</style>